<template>
  <div style="margin: 10px 0px;">
    <div style="border-bottom: 1px solid gray;"><h2>{{data.title}}</h2></div>
    <div style="min-height: 200px;">
      <div style="float: left;margin-right: 80px;">
        <img :src="data.imgUrl" style="width: 120px;height: 160px;">
      </div>

      <div class="info-text" >
        <ul v-show="cardT">
          <li><strong>Location:</strong>  {{data.info1}}</li>
          <li><strong>Email:</strong>  {{data.info2}}</li>
          <li><strong>Website:</strong>   <a v-html="data.info3" /></li>
        </ul>
        <ul v-show="cardS">
          <li><strong>Student Number:</strong>  {{data.info1}}</li>
          <li><strong>Room:</strong>  {{data.info2}}</li>
          <li><strong>Contact:</strong> {{data.info3}}</li>
        </ul>
      </div>
    </div>
    <div style="border-bottom: 1px solid gray;"><h2>Profile</h2></div>
    <div>
      <div class="info-text" >
        <ul>
          <li v-for="(item,index) in data.profile" :key="index">{{item}}</li>
        </ul>
      </div>
    </div>
    <div v-for="(val,i) in data.moreInfoOrder" :key="i">
      <div style="border-bottom: 1px solid gray;"><h2>{{data.moreInfo[val]["title"]}}</h2></div>
      <div class="info-text" > <ul> <li v-for="(item,i) in data.moreInfo[val]['data']" :key="i" :style="style_liL[data.moreInfo[val]['enableDot']]">{{item}}</li> </ul> </div>
    </div>
    <div v-show="data.enablePublicatinos">
      <div style="border-bottom: 1px solid gray;"><h2>Publications</h2></div>
      <div>
        <el-collapse v-model="data.activeNames">
          <el-collapse-item v-for="(val,key,index) in data.publications" :key="index" :title="val.title" :name="key">
            <PaperCard v-for="(i,index) in val.papers" :key="index" 
              :author  = "i.author" 
              :aritcle = "i.aritcle" 
              :journal = "i.journal" 
              :DOI = "i.DOI" 
            />
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import PaperCard from "../Publication/PaperCard.vue"
export default {
  components: { PaperCard },
  props: {
    json_path : {type:String,default:""},
    mt : {type:String,default:""},
  },
  data() {
    return {
      data: [],
      cardT: false,
      cardS: false,
      style_liL: ["list-style-type:none",""],
    };
  },
  created() {
    this.$http.get(this.json_path).then((response) => {
      this.data = response.data;
    });
    if (this.mt == "teacher") {
      this.cardT = true;
    }
    if (this.mt == "student") {
      this.cardS = true;
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-collapse-item__header{font-size: 16px;}

.info-text{
  line-height: 26px;
  margin: 20px 40px;
}

h2 {padding-bottom: 5px;color: #386143;}

</style>
